<template>
  <el-card shadow="never" class="header">
    <div class="header_title mar_b">{{ info.activity_name }}</div>
    <div class="dis_grid mar_b">
      <div>创建人：{{ info.created_user }}</div>
      <div class="header_active">
        活动类型： <p class="tag">{{info.activity_type === 1 ? '普通裂变' : '高级裂变'}}</p>
      </div>
      <div class="status">
        状态：<span :style="{ color: StatusColor(info.status_name) }">
          {{ info.status_name }}
        </span>
      </div>
      <div v-if="info.activity_type === 2" class="official_account_info">
        公众号：<el-avatar class="info_avatar" :size="24" :src="info.official_account_info.head_img" /> {{info.official_account_info.nick_name || '--'}}
      </div>
    </div>
    <div class="header_timer dis_grid">
      <div>创建时间：{{ info.created_at }}</div>
      <div v-if="info.period_type == 1">有效期：永久</div>
      <div v-else class="create_date">
        创建有效期：{{ info.effect_time[0] }} 至 {{ info.effect_time[1] }}
      </div>
      <div v-if="info.status_name == '提前结束'">提前结束时间：{{ info.real_end_date }}</div>
    </div>
    
 
  </el-card>
</template>
<script setup lang="ts">
  import { withDefaults, defineProps } from 'vue'
  import { StatusColor } from '@/utils/smartMarketing'
  interface Props {
    info: any
  }
  withDefaults(defineProps<Props>(), {
    info: () => {
      return {
        activity_name: '',
        period_type: 1,
        created_at: '',
        real_end_date: '',
        created_user: '',
        status_name: '',
        effect_time: ['', '']
        // last_update_time: ''
      }
    }
  })
</script>

<style lang="scss" scoped>
  .header {
    margin-bottom: 16px;
    :deep(.el-card__body) {
      font-size: 14px;
    }
    .dis_grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: center;
    }
    .mar_b {
      margin-bottom: 18px;
    }
    &_title {
      font-size: 18px;
      font-weight: 500px;
    }
    &_active {
      display: flex;
      align-items: center;
      .tag {
        padding: 6px;
        background: #fffaf9;
        border-radius: 2px;
        border: 1px solid #ffc69e;
        color: #ff6b00;
        line-height: 12px;
    }
    }
    .official_account_info {
      display: flex;
      align-items: center;
      .info_avatar {
        margin-right: 4px;
      }
    }
  }
</style>
